<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传视频 - 视频平台</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/upload.css">
    <link rel="stylesheet" href="/css/modal.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-brand">
            <a href="/">视频平台</a>
        </div>
        <div class="nav-links">
            <a href="/">首页</a>
            <a href="/videos">视频</a>
            <a href="/upload" class="active">上传</a>
            <a href="/profile">个人中心</a>
        </div>
        <div class="nav-auth">
            <div id="authButtons">
                <button class="btn btn-secondary" onclick="showLoginModal()">登录</button>
                <button class="btn btn-primary" onclick="showRegisterModal()">注册</button>
            </div>
            <div id="userMenu" class="user-menu" style="display: none;">
                <img src="/images/default-avatar.svg" alt="用户头像" id="userAvatar">
                <span id="userNickname"></span>
                <button class="btn btn-danger" onclick="logout()">退出</button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container">
        <div class="upload-container">
            <h1>上传视频</h1>
            <form id="uploadForm" class="upload-form">
                <div class="form-group">
                    <label for="title">视频标题</label>
                    <input type="text" id="title" name="title" required>
                </div>

                <div class="form-group">
                    <label for="description">视频描述</label>
                    <textarea id="description" name="description" rows="4"></textarea>
                </div>

                <div class="form-group">
                    <label for="video">选择视频文件</label>
                    <input type="file" id="video" name="video" accept="video/mp4,video/webm,video/quicktime" required>
                    <label for="video"><i class="fas fa-film"></i> 选择视频文件</label>
                    <span id="videoFileName" class="file-name">未选择文件</span>
                    <p class="help-text">支持的格式：MP4, WebM, MOV。最大文件大小：500MB</p>
                </div>

                <div class="form-group">
                    <label for="thumbnail">视频缩略图（可选）</label>
                    <input type="file" id="thumbnail" name="thumbnail" accept="image/*">
                    <label for="thumbnail"><i class="fas fa-image"></i> 选择缩略图</label>
                    <span id="thumbnailFileName" class="file-name">未选择文件</span>
                    <p class="help-text">如果不选择，将自动从视频中生成缩略图</p>
                </div>

                <div class="form-group">
                    <label>上传进度</label>
                    <div class="progress-bar">
                        <div class="progress" id="uploadProgress"></div>
                    </div>
                    <p id="uploadStatus" class="status-text"></p>
                </div>

                <button type="submit" class="upload-btn" id="uploadBtn">开始上传</button>
            </form>
        </div>
    </main>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>登录</h2>
                <button class="close-btn" onclick="closeLoginModal()">&times;</button>
            </div>
            <form id="loginForm" class="auth-form">
                <div class="form-group">
                    <label for="loginEmail">邮箱</label>
                    <input type="email" id="loginEmail" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
                <p class="help-text">还没有账号？<a href="#" onclick="showRegisterModal()">立即注册</a></p>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>注册</h2>
                <button class="close-btn" onclick="closeRegisterModal()">&times;</button>
            </div>
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label for="registerNickname">昵称</label>
                    <input type="text" id="registerNickname" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required>
                </div>
                <div class="form-group">
                    <label for="registerConfirmPassword">确认密码</label>
                    <input type="password" id="registerConfirmPassword" required>
                </div>
                <div class="form-group">
                    <label for="registerAvatar">头像</label>
                    <div class="avatar-upload">
                        <input type="file" id="registerAvatar" accept="image/*">
                        <img id="avatarPreview" src="/images/default-avatar.svg" alt="头像预览">
                    </div>
                    <p class="help-text">选择一张图片作为您的头像（可选）</p>
                </div>
                <div class="form-group">
                    <label for="registerCaptcha">验证码</label>
                    <div class="captcha-container">
                        <input type="text" id="registerCaptcha" required>
                        <img id="captchaImage" src="/api/captcha" alt="验证码" onclick="refreshCaptcha()">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">注册</button>
                <p class="help-text">已有账号？<a href="#" onclick="showLoginModal()">立即登录</a></p>
            </form>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="/js/auth.js"></script>
    <script src="/js/upload.js"></script>
</body>
</html> 